<template>
	<view class="address-add-container">
		<view class="box">
			<view class="head">收件人</view>
			<view class="body"><input placeholder-class="phcolor" placeholder="请输入收件人" v-model="name"></view>
		</view>
		<view class="box">
			<view class="head">性别</view>
			<view class="body">
				<radio-group @change="radioChange">
					<radio value="先生" color="#ff6164" :checked="sex == '先生'" style="transform:scale(0.7)" />男</label>
					<radio value="女士" color="#ff6164" :checked="sex == '女士'"
						style="transform:scale(0.7);margin-left:30upx" />女</label>
				</radio-group </view>
			</view>
		</view>
		<view class="box">
			<view class="head">手机号</view>
			<view class="body"><input placeholder-class="phcolor" placeholder="请输入手机号" v-model="phone"></view>
		</view>
		<view class="box">
			<view class="head">收货地址</view>
			<view class="body" @click="mapChooseLocation()"><input placeholder-class="phcolor" placeholder="点击选择地址"
					v-model="address" :readonly="true"></view>
		</view>

		<view class="box">
			<view class="head">门牌号</view>
			<view class="body">
				<textarea v-model="house" placeholder="输入详细地址" />
			</view>
		</view>

		<view class="box">
			<view class="body">
				<checkbox-group @change="handleDefault">
					<label>
						<checkbox checked="true" color="#ff6164" style="transform:scale(0.7)" />设为默认地址
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="confirm">新增</view>
		</view>
		<kModel ref="kModel" />
	</view>
</template>

<script>
	const chooseLocation = requirePlugin('chooseLocation');
	import kModel from '@/components/k-model/k-model.vue';
	export default {
		components: {
			kModel
		},
		data() {
			return {
				key: 'OU3BZ-BXOWK-TJVJK-AD6EK-QU5IS-TPFXE',
				id: null,
				sex: '先生',
				name: '',
				phone: '',
				address: '',
				house: '',
				is_default: true
			}
		},
		onLoad() {
			this.id = this.$Route.query.id
			if (this.id) {
				this.getRead(this.id)
			}
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		},
		onShow() {},
		methods: {
			handleDefault(e) {
				if (e.detail.value.length > 0) {
					this.is_default = true
				} else {
					this.is_default = false
				}
			},
			radioChange: function(evt) {
				this.sex = evt
			},

			mapChooseLocation() {
				let that = this
				uni.chooseLocation({
					success: async function(res) {
						that.address = res.address
					}
				})
			},
			getRead(id) {
				this.$myRequest('address/read', {
					id: id
				}).then((res) => {
					if (res.code == 1000) {
						this.name = res.data.name
						this.address = res.data.address
						this.house = res.data.house
						this.phone = res.data.phone
						this.sex = res.data.sex
					}
				})
			},
			confirm() {
				let data = {
					name: this.name,
					sex: this.sex,
					phone: this.phone,
					address: this.address,
					house: this.house,
					is_default: this.is_default,
				}
				this.$myRequest('address/add', data, "POST").then((res) => {
					if (res.code == 200) {
						setTimeout(function() {
							uni.showToast({
								title: "新增成功",
								duration: 1000
							});
							this.$Router.push({
								path: '/pages/address/address'
							})
						}, 1000)

					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000
						});
					}
				})

			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.address-add-container {
		.box {
			display: flex;
			width: 100%;
			padding: 30upx;
			border-bottom: 1px solid #f8f8f8;
			box-sizing: border-box;

			.head {
				font-size: 28upx;
				width: 160upx;
			}

			.body {
				flex: 1;
				font-size: 28upx;

				radio {
					transform: scale(0.7);
				}

				.phcolor {
					font-size: 28upx;
					color: #999;
				}
			}
		}

		.btn-box {
			padding: 30upx;
			padding-bottom: 60upx;
			width: 100%;
			box-sizing: border-box;

			.btn {
				border-radius: 20upx;
				text-align: center;
				padding: 20upx 0;
				color: $uni-color-green;
				background: $uni-color-team;
				width: 100%;
			}
		}
	}
</style>